<template>
  <div class="f-centerXY pagination-wrap">
    <el-pagination background class="pagination" :current-page="currentPage" :page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      sizes: [5, 10, 30, 50, 100, 300, 500, 1000],
      size: 10,
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
